<template>
	<scroll-view scroll-y class="public-scroll-view">
		<form>
			<view class="form-model">
				<text class="form-model-title">姓名</text>
				<input class="form-input-component" type="text" placeholder="请输入姓名" />
			</view>
			
			<view class="form-model">
				<text class="form-model-title">性别</text>
				<radio-group class="form-radio-group">
					<label>
						<radio/><text>男</text>
					</label>
					<label>
						<radio style="margin-left: 20rpx;"/><text>女</text>
					</label>
				</radio-group>
			</view>
			
			<view class="form-model">
				<text class="form-model-title">爱好</text>
				<checkbox-group class="form-checkbox-group">
					<label>
						<checkbox/><text>王者荣耀</text>
					</label>
					<label>
						<checkbox style="margin-left: 20rpx;"/><text>金铲铲之战</text>
					</label>
				</checkbox-group>
			</view>
			
			<view class="form-model">
				<text class="form-model-title">年龄</text>
				<slider class="form-slider" value="50" name="slider" show-value></slider>
			</view>
			
			<view class="form-model">
				<text class="form-model-title">开关</text>
				<switch class="form-switch" name="switch" />
			</view>
			
			<view class="form-button">
				<button form-type="submit" type="primary">提交</button>
				<button type="default" form-type="reset" >重置</button>
			</view>
		</form>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.form-model{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20rpx;
}
.form-model-title{
	display: block;
	width: 90%;
	font-size: 32rpx;
	font-weight: bold;
}
.form-input-component{
	padding-left: 20rpx;
	width: 90%;
	height: 80rpx;
	background-color: white;
	border-radius: 20rpx;
	margin-top: 20rpx;
}
	
.form-radio-group,.form-checkbox-group{
	width: 90%;
	height: 80rpx;
	display: flex;
	align-items: center;
}
.form-slider,.form-switch{
	width: 90%;
	margin-top: 20rpx;
}
		
	.form-button{
		margin-top: 20rpx;
	}
.form-button>button{
	width: 90%;
	margin-top: 20rpx;
}
</style>
